<!DOCTYPE html>
<html>
    
<head>
    <meta charset="utf-8">
    
    <title>三款很酷很骚气的底部导航 | ApocalypseBlog</title>
    <canvas id="header_canvas"style="position:absolute;bottom:0"></canvas> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    

    

    

    

    
<link rel="stylesheet" href="/dist/build.css?v=1.14.0.css">

    <script src="/javascripts/bubble.js"></script>
    <script>
        window.isPost = true
        window.aomori = {
            
            
        }
        window.aomori_logo_typed_animated = false
        window.aomori_search_algolia = false

    </script>
<script>
    ((window.gitter = {}).chat = {}).options = {
      room: 'ApocalypseBlog/Apocalypse'
    };
  </script>
  <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
<meta name="generator" content="Hexo 5.3.0"></head>
<!--DaoVoice服务http://blog.daovoice.io/-->

    <script>(function (i, s, o, g, r, a, m) {
        i['DaoVoiceObject'] = r;
        i[r] = i[r] ||
          function () {
            (i[r].q = i[r].q || []).push(arguments);
          };
        i[r].l = 1 * new Date();
        a = s.createElement(o);
        m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        a.charset = 'utf-8';
        m.parentNode.insertBefore(a, m);
      })(window, document, 'script', ('https:' === document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/b00f5052.js", 'daovoice');
      daovoice('init', {
        app_id: "b00f5052",
      });
      daovoice('update');
    </script>
  
<body>

    <div class="container">
    <header class="header">
        <div class="header-type">
            
            <div class="header-type-inner">
                
                    <a class="header-type-title" href="/">ApocalypseBlog</a>
                
    
                
            </div>
        </div>
        <div class="header-menu">
            <div class="header-menu-inner">
                
            </div>
            <div class="header-menu-social">
                
            </div>
        </div>

        <div class="header-menu-mobile">
            <div class="header-menu-mobile-inner" id="mobile-menu-open">
                <i class="icon icon-menu"></i>
            </div>
        </div>
    </header>

    <div class="header-menu-mobile-menu">
        <div class="header-menu-mobile-menu-bg"></div>
        <div class="header-menu-mobile-menu-wrap">
            <div class="header-menu-mobile-menu-inner">
                <div class="header-menu-mobile-menu-close" id="mobile-menu-close">
                    <i class="icon icon-cross"></i>
                </div>
                <div class="header-menu-mobile-menu-list">
                    
                </div>
            </div>
        </div>
    </div>

</div>

    <div class="container">
        <div class="main">
            <section class="inner">
                <section class="inner-main">
                    <div class="post">
    <article id="post-ckk6o6aux000e7kny8hr2gxyf" class="article article-type-post" itemscope
    itemprop="blogPost">

    <div class="article-inner">

        
          
        
        
        

        
        <header class="article-header">
            
  
    <h1 class="article-title" itemprop="name">
      三款很酷很骚气的底部导航
    </h1>
  

        </header>
        

        <div class="article-more-info article-more-info-post hairline">

            <div class="article-date">
  <time datetime="2020-12-06T02:18:21.000Z" itemprop="datePublished">2020-12-06</time>
</div>

            

            

            

        </div>

        <div class="article-entry post-inner-html hairline" itemprop="articleBody">
            <h1 id="三款很酷很骚气的底部导航"><a href="#三款很酷很骚气的底部导航" class="headerlink" title="三款很酷很骚气的底部导航"></a>三款很酷很骚气的底部导航</h1><blockquote>
<p>“</p>
<p>IT 界著名的尼古拉斯·大龙曾说：现在做 Android 开发，已经是大好时机，网上有很多成熟的框架，我们应充分利用好这些，所谓前人种树后人好乘凉，很多时候压根不需要了解太多原理，只需站在巨人的丁丁上即可。</p>
<p>”</p>
</blockquote>
<a id="more"></a>

<p>底部导航栏是 APP 最常用的功能之一，想最初都是自己自定义 ViewGroup 实现，后来 使用 RadioButton，在 Material Design 谷歌官方除了 TabLayout 和 Bottom Navigation， TabLayout 也是可以实现，如果设计允许，Bottom Navigation 可以直接用，最简单省事，关于 TabLayout 和 Bottom Navigation 吴小龙同学曾经有详细介绍，见：<a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/Smad1YWQQDFZb5P_nJtFNw">Android Design Support Library 之 TabLayout </a>和 <a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/TCZmD0_w8pfu26RuQbkzuA">Android Design Support Library 之 BottomNavigation</a>，我这里就不介绍，今天我要着重分享我在 GitHub 看到三款效果很酷的底部导航栏，骚气的让我眼前一亮的让我只能喊，卧槽，牛逼，666。</p>
<h2 id="ReadableBottomBar"><a href="#ReadableBottomBar" class="headerlink" title="ReadableBottomBar"></a><strong>ReadableBottomBar</strong></h2><h3 id="简介"><a href="#简介" class="headerlink" title="简介"></a><strong>简介</strong></h3><p>Android 另一个 Material Design Bottom Navigation 库，所有的设计和灵感来源于 Ranjit。</p>
<h3 id="效果预览"><a href="#效果预览" class="headerlink" title="效果预览"></a><strong>效果预览</strong></h3><p><img src="http://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/06e1c2a46c7c412d80984aa47ee7cd70~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p>
<h3 id="源码地址"><a href="#源码地址" class="headerlink" title="源码地址"></a><strong>源码地址</strong></h3><p><a target="_blank" rel="noopener" href="https://github.com/iammert/ReadableBottomBar">https://github.com/iammert/ReadableBottomBar</a></p>
<h2 id="MeowBottomNavigation"><a href="#MeowBottomNavigation" class="headerlink" title="MeowBottomNavigation"></a><strong>MeowBottomNavigation</strong></h2><h3 id="简介-1"><a href="#简介-1" class="headerlink" title="简介"></a><strong>简介</strong></h3><p>用 kotlin 编写的 Android 的简单＆弯曲＆材料底部导航。</p>
<h3 id="效果预览-1"><a href="#效果预览-1" class="headerlink" title="效果预览"></a><strong>效果预览</strong></h3><p><img src="http://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/39c25a3b79a9413db2eee7c703ce9b31~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p>
<h3 id="源码地址-1"><a href="#源码地址-1" class="headerlink" title="源码地址"></a><strong>源码地址</strong></h3><p><a target="_blank" rel="noopener" href="https://github.com/shetmobile/MeowBottomNavigation">https://github.com/shetmobile/MeowBottomNavigation</a></p>
<h2 id="curved-navigation-bar"><a href="#curved-navigation-bar" class="headerlink" title="curved_navigation_bar"></a><strong>curved_navigation_bar</strong></h2><h3 id="简介-2"><a href="#简介-2" class="headerlink" title="简介"></a><strong>简介</strong></h3><p>用 Flutter 编写，可以轻松实现动画曲线导航栏。</p>
<h3 id="效果预览-2"><a href="#效果预览-2" class="headerlink" title="效果预览"></a><strong>效果预览</strong></h3><p><img src="http://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d09406b56b14799b18c90b841041520~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p>
<h3 id="源码地址-2"><a href="#源码地址-2" class="headerlink" title="源码地址"></a><strong>源码地址</strong></h3><p><a target="_blank" rel="noopener" href="https://github.com/rafalbednarczuk/curved_navigation_bar">https://github.com/rafalbednarczuk/curved_navigation_bar</a></p>

        </div>

    </div>

    

    

    

    

    

    
<nav class="article-nav">
  
  
    <a href="/2020/10/07/%E6%88%91%E4%BB%AC%E8%A6%81%E4%B8%8D%E8%A6%81%E4%B8%8A%E7%BA%BF%E3%80%8C%E4%B8%AA%E4%BA%BAapp%E3%80%8D-%EF%BC%9F/" id="article-nav-older" class="article-nav-link-wrap">
      <div class="article-nav-caption">上一篇</div>
      <div class="article-nav-title">我们要不要上线「个人app」 ？</div>
    </a>
  
</nav>


    <section class="share">
        <div class="share-title">分享</div>
        <a class="share-item" target="_blank"
            href="https://twitter.com/share?text=三款很酷很骚气的底部导航 - ApocalypseBlog&url=http://example.com/2020/12/06/%E4%B8%89%E6%AC%BE%E5%BE%88%E9%85%B7%E5%BE%88%E9%AA%9A%E6%B0%94%E7%9A%84%E5%BA%95%E9%83%A8%E5%AF%BC%E8%88%AA/">
            <box-icon type='logo' name='twitter'></box-icon>
        </a>
        <a class="share-item" target="_blank"
            href="https://www.facebook.com/sharer.php?title=三款很酷很骚气的底部导航 - ApocalypseBlog&u=http://example.com/2020/12/06/%E4%B8%89%E6%AC%BE%E5%BE%88%E9%85%B7%E5%BE%88%E9%AA%9A%E6%B0%94%E7%9A%84%E5%BA%95%E9%83%A8%E5%AF%BC%E8%88%AA/">
            <box-icon name='facebook-square' type='logo' ></box-icon>
        </a>
        <!-- <a class="share-item" target="_blank"
            href="https://service.weibo.com/share/share.php?title=三款很酷很骚气的底部导航 - ApocalypseBlog&url=http://example.com/2020/12/06/%E4%B8%89%E6%AC%BE%E5%BE%88%E9%85%B7%E5%BE%88%E9%AA%9A%E6%B0%94%E7%9A%84%E5%BA%95%E9%83%A8%E5%AF%BC%E8%88%AA/&pic=">
            <div class="n-icon n-icon-weibo"></div>
        </a> -->
    </section>

</article>









</div>
                </section>
            </section>

             
            <aside class="sidebar">
            
                
            </aside>
        </div>
    </div>

    <footer class="footer">
    <div class="footer-wave">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#3c4859" fill-opacity="1" d="M0,160L60,181.3C120,203,240,245,360,240C480,235,600,181,720,186.7C840,192,960,256,1080,261.3C1200,267,1320,213,1380,186.7L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>
    </div>

    <div class="footer-wrap">
        <div class="footer-inner"> 
            ApocalypseBlog &copy; 2021<br>
            Powered By Hexo · Theme By <a href="https://github.com/lh1me/hexo-theme-aomori" target="_blank">Aomori</a>
        </div>
    </div>

</footer>




<script src="/dist/build.js?1.14.0.js"></script>


<script src="/dist/custom.js?1.14.0.js"></script>









</body>

</html>